<template>
	<div class="port-page">
		<!-- 顶部按钮 -->
		<div class="but1">
			<router-link to="/home">
				<el-button type="warning" size="small" class="add btn" style='margin-right: 10px;' icon="el-icon-menu">首页</el-button>
			</router-link>

		</div>
		<!-- 模糊搜索条件 -->
		<div style="overflow: hidden; margin-top: 40px;">

			<div class="rb">
				<div style="width: 100%; text-align: right;">
					<el-date-picker v-model="time1" type="date" style="line-height: 40px; width: 150px;" placeholder="选择开始日期" value-format="yyyy-MM-dd">
					</el-date-picker>
					<el-button icon="el-icon-search" type="primary" round size="small" style="margin-left: 10px;" @click="search()"></el-button>
				</div>
				<div id="yxrb" style="width: 100%;height: 400px;"></div>
				<div class="tjsj">
					<ul>
						<li>退费人次：<span>{{tfrc}}</span></li>
						<li>退费费用：<span>{{tfje}}</span></li>
						<li>上课人次：<span>{{skrc}}</span></li>
						<li>课销金额：<span>{{kxje}}</span></li>
						<li>学生出勤率：<span>{{cql}}%</span></li>
					</ul>
				</div>
				<div id="rbbt" style="width: 400px;height: 400px;float: left; margin-left: 40px;"></div>
			</div>
			<div class="yb">
				<div style="width: 100%; text-align: right;">
					<!--<el-date-picker v-model="btime" type="date" style="line-height: 40px; width: 150px;" placeholder="选择开始日期" value-format="yyyy-MM-dd">
					</el-date-picker>-->
					<el-date-picker v-model="time2" type="month" style="line-height: 40px; width: 150px;" value-format="yyyy-MM" placeholder="选择月">
					</el-date-picker>
					<el-button icon="el-icon-search" type="primary" round size="small" style="margin-left: 10px;" @click="search2()"></el-button>
				</div>
				<div id="yxyb" style="width: 100%;height: 400px;"></div>
				<div class="tjsj">
					<ul>
						<li>退费人次：<span>{{tfrc2}}</span></li>
						<li>退费费用：<span>{{tfje2}}</span></li>
						<li>上课人次：<span>{{skrc2}}</span></li>
						<li>课销金额：<span>{{kxje2}}</span></li>
						<li>学生出勤率：<span>{{cql2}}%</span></li>
					</ul>
				</div>
				<div id="ybbt" style="width: 400px;height: 400px; float: left;margin-left: 40px;"></div>
			</div>
		</div>

		<LoadingComponent v-show="isLoading"></LoadingComponent>
		<router-view class="port-view"></router-view>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import LoadingComponent from 'components/loading'
	import qs from 'qs'
	import echarts from 'echarts'
	export default {
		props: ['params'],
		components: {
			LoadingComponent,
		},
		data() {
			return {
				time1:'',
				time2:'',
				tfrc: '',
				tfje: '',
				skrc: '',
				kxje: '',
				cql: '',
				tfrc2: '',
				tfje2: '',
				skrc2: '',
				kxje2: '',
				cql2: '',
				je: [],
				multipleDelNum: '', //获取批量选择的数据
				dataList: [], //表格数据
				comboxlist: [], //下拉框 动态的
				/*动画加载*/
				isLoading: true, //动画加载
				searchLoading: false, //搜索按钮触发按钮动画
				/*分页属性设置*/
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: this.$store.state.pageindex, //当前分页页码
				pagesizes: this.$store.state.pagesizes, //显示个数的选择器选项
				pagesize: this.$store.state.pagesize, //每页显示条目数
				total: 0, //总条数

				/*组件区域*/

			}
		},
		created() {
			//权限
			var logininfo = JSON.parse(localStorage.logininfo);
			this.$store.dispatch('changeTitle', '财务日报'); //修改title
			this.$store.dispatch('changeRouterIndex', '/statistics/cwrb'); //修改路由
			 var nowDate = new Date();
			 var year = nowDate.getFullYear();
			 var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
			 var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
			 var dateStr = year + "-" + month + "-" + day;
			 var dateStr1 = year + "-" + month;
			 this.time1 = dateStr
			 this.time2 = dateStr1
			this.search(); //分页获取默认数据
			this.search2(); //分页获取默认数据
			this.isLoading = true; //动画开始
		},
		mounted() {
			//加载完成之后event
			this.isLoading = false; //动画结束
		},
		methods: {
			drawPie(id, lststr) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					title: {
						text: '支出统计',
						left: 'center'
					},

					tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
					},
					legend: {
						// orient: 'vertical',
						// top: 'middle',
						bottom: 10,
						left: 'center',
						data: ['西凉', '益州', '兖州', '荆州', '幽州']
					},
					series: [{
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						selectedMode: 'single',
						data: this.add,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				})
			},
			drawPie2(id, lststr) {
				this.charts = echarts.init(document.getElementById(id))
				//				var colors = ['#d14a61', '#675bba'];
				this.charts.setOption({
					title: {
						text: lststr,
					},
					tooltip: {
						trigger: 'axis',

					},
					xAxis: [{
						boundaryGap : true,
						type: 'category',
						data: ['书费收入', '学费收入', '新增收入', '续费收入', '线上课程收入', '其他收入'],
						axisLabel:{  
                         interval:0,//横轴信息全部显示  
                   		 }  
					}],
					
					yAxis: {
						type: 'value',
						
					},
					series: [{
							name: '金额',
							type: 'bar',
							data: this.je,

						},
					]
				})
			},
			search() {
				this.je1 = ''
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params3 = qs.stringify({
					day: 1,
					code: 'rb',
					lsid: '',
					bjtime: this.time1,
					edtime: this.time1,
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				});
				this.axios.post(this.$store.state.api + 'ls/getlstj', params3)
					.then(res => {
						console.log(res, 999988887777)
						this.je = res.data.data.je.split(",");
						this.add = res.data.data.rzc
						this.$nextTick(function() {
							this.drawPie2('yxrb', '运行日报')
						});
						this.$nextTick(function() {
							this.drawPie('rbbt')
						});
						this.tfrc = res.data.data.list[0].tfrc
						this.tfje = res.data.data.list[0].tfje
						this.skrc = res.data.data.list[0].skrc
						this.kxje = res.data.data.list[0].kxje
						this.cql = res.data.data.list[0].xxcql
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			search2() {
				var time = this.time2+'-00'
				this.je = ''
				var logininfo = JSON.parse(localStorage.logininfo);
//				alert(time)
				this.searchLoading = true;
				var params3 = qs.stringify({
					day: 1,
					code: 'yb',
					lsid: '',
					bjtime: time,
					edtime: time,
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				});
				this.axios.post(this.$store.state.api + 'ls/getlstj', params3)
					.then(res => {
						console.log(res, 999988887777)
						this.je = res.data.data.je.split(",");
						this.add = res.data.data.yzc
						this.$nextTick(function() {
							this.drawPie2('yxyb', '运行月报')
						});
						this.$nextTick(function() {
							this.drawPie('ybbt')
						});
						this.tfrc2 = res.data.data.list[0].tfrc
						this.tfje2 = res.data.data.list[0].tfje
						this.skrc2 = res.data.data.list[0].skrc
						this.kxje2 = res.data.data.list[0].kxje
						this.cql2 = res.data.data.list[0].xxcql
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
		},
	}
</script>

<style lang="less" scoped>
	.port-page {
		.but1 {
			margin-top: 30px;
		}
		.rb {
			width: 45%;
			float: left;
			overflow: hidden;
			.tjsj {
				width: 180px;
				/*border: 1px solid;*/
				float: left;
				margin-left: 50px;
				ul {
					margin-top: 80px;
					li {
						width: 100%;
						height: 50px;
						line-height: 50px;
						overflow: hidden;
						span {
							width: 80px;
							height: 40px;
							text-align: center;
							display: inline-block;
							border-bottom: 1px solid;
						}
					}
				}
			}
		}
		.yb {
			width: 45%;
			float: right;
			/*margin-left: 50px;*/
			overflow: hidden;
			.tjsj {
				width: 180px;
				float: left;
				/*border: 1px solid;*/
				margin-left: 50px;
				ul {
					margin-top: 80px;
					li {
						width: 100%;
						height: 50px;
						line-height: 50px;
						overflow: hidden;
						span {
							width: 80px;
							height: 40px;
							text-align: center;
							display: inline-block;
							border-bottom: 1px solid;
						}
					}
				}
			}
		}
	}
</style>